<!--饼状图。-->
<template>
  <div id="myChart" :style="{width: '800px', height: '600px'}"></div>
</template>
<script>
  export default {
    name: 'Echarts',
    //mounted()：方式一。
    // mounted(){
    //   let _this = this;
    //   axios.get('http://localhost:8181/fruit/pieVO').then(function (response) {
    //     // console.log(response);
    //     // 基于准备好的dom，初始化echarts实例
    //     let myChart = _this.$echarts.init(document.getElementById('myChart'));
    //     // 绘制图表
    //     myChart.setOption({
    //       backgroundColor: '#2c343c',
    //
    //       title: {
    //         text: 'Customized Pie',
    //         left: 'center',
    //         top: 20,
    //         textStyle: {
    //           color: '#ccc'
    //         }
    //       },
    //
    //       tooltip: {
    //         trigger: 'item'
    //       },
    //
    //       visualMap: {
    //         show: false,
    //         min: 80,
    //         max: 600,
    //         inRange: {
    //           colorLightness: [0, 1]
    //         }
    //       },
    //       series: [
    //         {
    //           name: '访问来源',
    //           type: 'pie',
    //           radius: '55%',
    //           center: ['50%', '50%'],
    //           data: response.data.sort(function (a, b) { return a.value - b.value; }),
    //           roseType: 'radius',
    //           label: {
    //             color: 'rgba(255, 255, 255, 0.3)'
    //           },
    //           labelLine: {
    //             lineStyle: {
    //               color: 'rgba(255, 255, 255, 0.3)'
    //             },
    //             smooth: 0.2,
    //             length: 10,
    //             length2: 20
    //           },
    //           itemStyle: {
    //             color: '#c23531',
    //             shadowBlur: 200,
    //             shadowColor: 'rgba(0, 0, 0, 0.5)'
    //           },
    //
    //           animationType: 'scale',
    //           animationEasing: 'elasticOut',
    //           animationDelay: function (idx) {
    //             return Math.random() * 200;
    //           }
    //         }
    //       ]
    //     });
    //   });
    //  
    // }
    
    // mounted()：方式二，是用async await做的，自己做的。
    async mounted(){
      
      const {data:res} = await axios.get('http://localhost:8181/fruit/pieVO');
        // console.log(res);
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'));
        // 绘制图表
        myChart.setOption({
          backgroundColor: '#2c343c',

          title: {
            text: 'Customized Pie',
            left: 'center',
            top: 20,
            textStyle: {
              color: '#ccc'
            }
          },

          tooltip: {
            trigger: 'item'
          },

          visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
              colorLightness: [0, 1]
            }
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              data: res.sort(function (a, b) { return a.value - b.value; }),//
              roseType: 'radius',
              label: {
                color: 'rgba(255, 255, 255, 0.3)'
              },
              labelLine: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.3)'
                },
                smooth: 0.2,
                length: 10,
                length2: 20
              },
              itemStyle: {
                color: '#c23531',
                shadowBlur: 200,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },

              animationType: 'scale',
              animationEasing: 'elasticOut',
              animationDelay: function (idx) {
                return Math.random() * 200;
              }
            }
          ]
        });
    }
  }
</script>